<template>
  <div class="flex items-center justify-center w-screen h-screen">
    <n-card title="登录" class="w-96">
      <n-form :model="formData" :rules="rules" label-placement="left" label-width="80px">
        <n-form-item label="账号" path="username">
          <n-input v-model:value="formData.username" />
        </n-form-item>
        <n-form-item label="密码" path="password">
          <n-input v-model:value="formData.password" type="password" />
        </n-form-item>
        <n-form-item>
          <n-button type="primary" @click="handleSubmit" :loading="isLoading">登录</n-button>
        </n-form-item>
      </n-form>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { Login } from '@/api/base';
import { LoginParams } from '@/api/base/types';
import { FormRules } from 'naive-ui';
import { useUserStore } from '@/store/modules/user';

const { setToken } = useUserStore(); // 获取 store 实例

const isLoading = ref(false);

const formData = reactive<LoginParams>({
  username: 'admin',
  password: 'admin',
  code: 'admin',
});

const rules: FormRules = {
  username: [{ message: '请输入用户名', required: true }],
  password: [{ message: '请输入用户密码', required: true }],
};

const handleSubmit = async () => {
  isLoading.value = true;
  const res = await Login(formData);
  isLoading.value = false;
  setToken(res.data);
};
</script>
